<template>
	<view>
		<view class="item" v-for="(res, index) in siteList" :key="res.id"  @tap="handleTopClick(res)">
			<view class="top">
				<view class="name">{{ res.name }}</view>
				<view class="phone">{{ res.phone }}</view>
				<view class="tag">
					<text v-for="(item, index) in res.tag" :key="index"
						:class="{red:item.tagText=='默认'}">{{ item.tagText }}</text>
				</view>
			</view>
			<view class="bottom">
				{{res.site}}
			</view>
			<view class="edit">
				<u-icon name="edit-pen" :size="40" color="#999999"></u-icon>
			</view>
		</view>
		<view class="addSite" @tap="toAddSite">
			<view class="add">
				<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>新建收货地址
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				siteList: []
			};
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData() {
				this.siteList = [{
						id: 1,
						name: '游四方',
						phone: '19970861797',
						tag: [{
							tagText: '默认'
						}],
						site: '广东省深圳市宝安区 自由路666号'
					},
					{
						id: 2,
						name: '杜十娘',
						phone: '13217971987',
						tag: [],
						site: '广东省深圳市宝安区 博爱路520号'
					},
					{
						id: 3,
						name: '王平安',
						phone: '18007971769',
						tag: [],
						site: '广东省深圳市宝安区 平安路110号'
					}
				];
			},
			toAddSite() {
				uni.navigateTo({
					url: '/pages/user/addSite'
				});
			},
			handleTopClick(item) {
				// 这里假设关闭当前窗体并返回地址信息的逻辑是通过 uni.navigateBack 并传递参数实现
				uni.navigateBack({
					delta: 1,
					success: () => {
						const addressInfo = item.site;
						// 可以通过事件总线等方式将地址信息传递给调用方
						// 这里只是模拟，实际应用中可以根据具体情况调整
						console.log('返回的地址信息：', addressInfo);
					},
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.item {
		padding: 40rpx 32rpx 40rpx 28rpx;
		border-bottom: 1px solid #eeeeee;

		.top {
			display: flex;
			font-weight: bold;
			font-size: 34rpx;

			.phone {
				margin-left: 60rpx;
			}

			.tag {
				display: flex;
				font-weight: normal;
				align-items: center;

				text {
					display: block;
					width: 60rpx;
					height: 34rpx;
					line-height: 34rpx;
					color: #ffffff;
					font-size: 20rpx;
					border-radius: 6rpx;
					text-align: center;
					margin-left: 30rpx;
					background-color: rgb(49, 145, 253);
				}

				.red {
					background-color: red
				}
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #999999;
		}
	}

	.addSite {
		display: flex;
		justify-content: space-around;
		width: 694rpx;
		line-height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 28rpx;
		background-color: #00a73b;
		border-radius: 60rpx;
		font-size: 30rpx;

		.add {
			display: flex;
			align-items: center;
			color: #ffffff;

			.icon {
				margin-right: 10rpx;
			}
		}
	}
</style>